<template>
  <div class="userManager-box">
    <el-row class="btn-group" justify="start" type="flex">
      <el-col :offset="9" :span="9"><el-input v-model="reach" prefix-icon="el-icon-search"  placeholder="请输入搜索的商品"></el-input><el-button @click="reachAddress" type="primary">搜索</el-button></el-col>
      <el-col :span="6">
        <el-button-group>
        <el-button type="primary">按姓名排序</el-button>
        <el-button type="primary">按时间排序</el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <el-row class="userManager-content">
      <el-table :data="address">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="用户名ID" prop="user_id"></el-table-column>
        <el-table-column label="用户名" prop="user_name"></el-table-column>
        <el-table-column label="用户地址" prop="address_name" align="center"></el-table-column>
        <el-table-column label="是否被删除" prop="is_deleted" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.is_deleted == 0?'否':'是'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.create_time}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row type="flex" justify="center">
      <el-pagination
            @size-change="pageSizeChange"
            @current-change="currPageChange"
            :current-page="curr_page"
            :page-sizes="[10, 50, 100, 500, 1000]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </el-row>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
import dateUtil from '@/utils/DateUtil'
export default {
  data () {
    return {
      action: {
        selectaddress: 'shoes_Web_exploded/Address/selectPageAddress'
      },
      reach: '',
      dialogVisible: false,
      address: [],
      page_size: 10,
      curr_page: 1,
      total: 0
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    reachAddress () {
      this.getAddressList(this.reach, 1, this.page_size)
    },
    pageSizeChange (pageSize) {
      this.getAddressList(this.name, 1, pageSize)
    },
    currPageChange (currPage) {
      this.getAddressList(this.name, currPage, this.page_size)
    },
    getAddressList (reach = null, curr_page = 1, page_size = 10) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size
      }
      if (reach !== null && reach !== '') {
        params['user_name'] = reach
      }
      http.xhrPost(this, this.action.selectaddress, params, (res) => {
        console.log(res)
        this.address = res.data.list
        this.page_size = res.data.pageSize
        this.curr_page = res.data.pageNum
        this.total = res.data.total
      })
    },
    format (date) {
      return dateUtil.formatDate('date', 'yyyy-MM-dd HH:mm:ss')
    }
  },
  mounted () {
    this.getAddressList()
  }
}
</script>

<style lang="scss">
@import '../../assets/style/common.scss';
  .userManager-box {
    margin: 0px;
    padding: 0px;
    .btn-group {
      .el-input {
        width: 250px;
      }
    }
    .userManager-content {
      margin-top: 20px;
      .shoes-img {
        width: 100px;
        height: 100px;
      }
    }
  }
</style>
